<template>
  <el-dialog
    :title="`${currentDictionaryDetail?.dictCode ? '编辑' : '新增'}字典数据`"
    :model-value="show"
    width="500px"
    @close="commEvent.onClose"
  >
    <el-form ref="formRef" :model="formValue" :rules="rules">
      <el-form-item label="字典类型" prop="dictType">
        <el-select v-model="formValue.dictType" placeholder="请选择" disabled>
          <el-option v-for="(item, index) in props.dictTypeEnum" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="数据名称" prop="dictLabel">
        <el-input v-model="formValue.dictLabel" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="数据键值" prop="dictValue">
        <el-input v-model="formValue.dictValue" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="样式属性" prop="cssClass">
        <el-input v-model="formValue.cssClass" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="显示排序" prop="dictSort">
        <el-input-number v-model="formValue.dictSort" :min="0" controls-position="right" />
      </el-form-item>
      <el-form-item label="回显样式" prop="listClass">
        <el-select v-model="formValue.listClass" placeholder="请选择" filterable>
          <el-option
            v-for="item in listClassOptions"
            :key="item.value"
            :label="item.label + '(' + item.value + ')'"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-switch v-model="formValue.status" :active-value="1" :inactive-value="0" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formValue.remark" type="textarea" :rows="4" placeholder="请输入"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="commEvent.onEnter">确 定</el-button>
      <el-button @click="commEvent.onClose">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { PropType, ref, watch, nextTick } from "vue"
import { ElMessage, FormInstance, FormRules } from "element-plus"
import { listClassOptions } from "../enum"
import { saveDataDictionaryDetail } from "@/api/modules/system"
import { SystemSpace } from "@/api/interface/system"
const props = defineProps({
  show: { type: Boolean, default: false },
  currentDictionaryDetail: { type: Object as PropType<SystemSpace.DataDictionaryDetailPage>, default: () => {} },
  dictTypeEnum: { type: Array as PropType<any[]>, default: () => [] },
  dictType: { type: String, default: "" }
})
const emit = defineEmits(["update:show", "refresh"])
// 参数
const formRef = ref<FormInstance>() // 表单实例
// 表单数据
const formValue = ref({
  dictType: "",
  dictLabel: "",
  dictValue: "",
  cssClass: "",
  dictSort: 0,
  status: 1,
  listClass: "",
  remark: ""
})
// 表单校验规则
const rules: FormRules = {
  dictType: [{ required: true, message: "请选择字典类型", trigger: "change" }],
  dictLabel: [{ required: true, message: "请输入数据名称", trigger: "blur" }],
  dictValue: [{ required: true, message: "请输入数据键值", trigger: "blur" }],
  listClass: [{ required: true, message: "请输入回显样式", trigger: "blur" }],
  remark: [{ required: true, message: "请输入备注", trigger: "blur" }]
}
// 事件集合
const commEvent = {
  onClose: () => {
    emit("update:show", false)
  },
  // 提交表单
  onEnter: () => {
    if (!formRef.value) return
    formRef.value.validate(async valid => {
      if (!valid) return
      const res = await saveDataDictionaryDetail(formValue.value)
      if (res.code === "200") {
        ElMessage.success("操作成功")
        commEvent.onClose()
        emit("refresh")
      }
    })
  }
}
watch(
  () => props.show,
  flag => {
    if (flag) {
      nextTick(() => {
        formRef.value?.resetFields()
        if (props.currentDictionaryDetail) {
          formValue.value = { ...props.currentDictionaryDetail }
        }
        formValue.value.dictType = props.dictType
      })
    }
  }
)
</script>

<style lang="scss" scoped></style>
